<template>
	<div class="goodsinfo">
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>

		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper></swiper>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-header">标题</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价:<del>¥999</del>&nbsp;&nbsp;销售价：<span class="now">888</span>
					</p>
					<p class="amount">
						购买数量：<num @getCount="getSelectCount" :maxCount="product.max"></num>
					</p>
					<mt-button size="small" type="primary">立即购买</mt-button>
					<mt-button size="small" type="danger" @click=" goCar()">加入购物车</mt-button>
				</div>
			</div>

		</div>
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:{{product.num}}</p>
					<p>库存数量:{{product.amount}}</p>
					<p>上架时间:{{product.date|dateFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button size="large" type="primary" plain @click="goDesc(product.id)">图文介绍</mt-button>
				<mt-button size="large" type="danger" plain @click="goCmt(product.id)">商品评论</mt-button>
			</div>

		</div>

	</div>
</template>

<script>
import num from "../sub/num.vue";
import swiper from "../sub/swiper.vue";
export default {
  data() {
    return {
      product: {
        id: 1,
        num: "xxx",
        amount: 999,
		date: Date.now(),
		max:99
      },
	  ballFlag: false,
	  seletCount:1
    };
  },
  methods: {
    goDesc(id) {
      this.$router.push({ name: "goodsdesc", params: { id: id } });
    },
    goCmt(id) {
      this.$router.push({ name: "goodscmt", params: { id: id } });
    },
    goCar() {
        console.log(6666)
      this.ballFlag = !this.ballFlag;
    
      var goodsinfo={
        id:this.$route.params.id,
        price:888,
        count:parseInt(this.seletCount),
        select:true
      }
      console.log(6666)
      
      this.$store.commit("addToCar",goodsinfo)
    },
    beforeEnter(el) {
     el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
     el.offsetWidth;
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
   el.style.transition = "all 2s ";

      setTimeout(()=>{
		  done()
	  },2000)
    },
    afterEnter(el) {
       this.ballFlag = !this.ballFlag;
	},
	getSelectCount(count){
		this.seletCount=count
		console.log(count)
	}
  },
  components: {
    swiper,
    num
  }
};
</script>
<style lang="scss" scoped>
.goodsinfo {
  overflow: hidden;
  background: #eee;
  .now {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    position: absolute;
    z-index: 9999;
    top: 390px;
    left: 146px;
  }
}
</style>

